<template>
	<view>
		<loading :loadshow="loading" :loadicon="_imgs.loadingSvg3"></loading>
		<u-navbar back-text="返回" ></u-navbar>
		<view >
			<view class="flex p-xs padding">
				<view class="flex-twice margin-xs">
					<view class="text-xl">{{bookData.name}}</view>
					<view class="text-grey margin-top-xs">作者: {{bookData.author}}</view>
					<view class="text-grey margin-top-xs">状态: {{bookData.state}}</view>
					<view class="text-grey margin-top-xs">分类: {{bookData.type}}</view>
					<view class="text-grey margin-top-xs">更新: {{bookData.updateTime}}</view>
				</view>
				<view class="flex-sub margin-xs">
					<image :src="bookData.img" mode="widthFix" class="radius img-box" lazy-load></image>
				</view>
			</view>

			<scroll-view scroll-x class="bg-white nav" scroll-with-animation>
				<view class="cu-item" v-for="(item,index) in TabData" :key="index" :class="index==TabCur?'text-orange cur':''" @tap="tabSelect"
				 :data-id="index">
					{{item}}
				</view>
			</scroll-view>
			<view class="bg-white padding solid-top margin-bottom" v-if="TabCur==0">
				简介：{{bookData.intro}}
			</view>
			<view class="bg-white solid-top margin-bottom" v-else>
				<view class="cu-bar solid-bottom">
					<view class="action">
						<text class="text-sm">更新至 : {{bookData.news}}</text>
					</view>
					<view class="action">
						<text @click="orderClick">{{order}}</text>
					</view>
				</view>
				<view class="cu-list menu">
					<view class="cu-item arrow" v-for="(item,index) in listData" :key="index" @click="details(item,index)">
						<view class="content">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="cu-bar bg-white tabbar border zai-tabbar-bar">
				<view class="btn-group">
					<button class="cu-btn bg-orange round shadow-blur" @click="AddClick" v-if="addBtn==false">加入书架</button>
					<text v-else>已加入书架</text>
				</view>
				<view class="btn-group">
					<button class="cu-btn bg-red round shadow-blur" @click="readClick">立即阅读</button>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur: 0,
				TabData: ['简介', '目录'],
				bookData: {},
				listData: [],
				order: '倒序',
				BookID: null,
				source:1,
				addBtn: true,

				startID: null,
				startName: '',

				img_url: '',
				name: '',
				author: '',
				updateTime: '',
				type: '',
				status: '',
			}
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
			},
			GetBookDetails(id,source) {
				debugger
				console.info("加载Book详情,源:"+source + id)
				let that = this;
				that.zaiApi({
					url: source + id,
				}).then((book) => {
					that._tool.DetailsData(book,id,source).then((res) => {
						this.bookData = res.data;
						this.listData = res.list;
						this.startID = res.list[0].id;
						this.startName = res.list[0].name;
					});
				});
			},
			orderClick() {
				let order = this.order;
				if (order == '正序') {
					this.order = '倒序';
				} else {
					this.order = '正序';
				}
				//排序
				this.listData = this.listData.reverse();
			},
			AddClick() {
				let bookData = {
					id: this.BookID,
					news: this.newsID,
					page: 0,
					index: 1,
					name: this.newsName,
					title: this.bookData.name,
					img: this.bookData.img
				};
				_tool.AddBookListData(bookData).then((res) => {
					this.addBtn = true;
				});
			},
			readClick() {
				let bookData = {
					id: this.BookID,
					startId: this.startID,
					startName: this.startName,
					page: 0,
					index: 1,
					data: this.bookData,
					list: this.listData,
					source:this.source
				};
				try {
					uni.setStorageSync('BookReadData', bookData);
					uni.navigateTo({
						url: '/pages/read/read'
					})
				} catch (e) {
					uni.showToast({
						title: '数据异常',
						icon: 'none'
					});
				}
			},
			details(item, index) {
				let order = this.order;
				let readId = index + 1;
				let list = this.listData;
				console.info(readId)
				if (order == '正序') {
					//显示正序时 实际当前为倒序
					let listId = this.listData.length;
					readId = listId - index;
				}
				if (this.listData[0].id != this.startID) {
					console.info(this.startID)
					list = list.reverse()
				}
				let bookData = {
					id: this.BookID,
					startId: item.id,
					startName: item.name,
					page: 0,
					index: readId,
					data: this.bookData,
					list: list,
					source:this.source
				};
				try {
					uni.setStorageSync('BookReadData', bookData);
					uni.navigateTo({
						url: '/pages/read/read'
					})
				} catch (e) {
					uni.showToast({
						title: '数据异常',
						icon: 'none'
					});
				}
			}
		},
		onLoad: function(option) {
			this.source = option.source;
			this.BookID = option.id;
			console.info("查看详情,BookID:"+this.BookID+" 源:"+this.source)
			let that = this;
			that.GetBookDetails(this.BookID,this.source);
			//是否已经加入书架
			that._tool.GetBookListID(option.id).then((res) => {
				that.addBtn = res;
			});
		}

	}
</script>

<style lang="less">

</style>
